<template>
	<div class="app-container">
		<div class="houseEditName">
			<h1>{{houseEditName}}</h1>
		</div>
		<div class="house-edit">
			<el-form class="house-edit form " :model="houseNewForm" :rules="rules" ref="houseNewForm" label-width="110px">
				<el-row justify="space-around">
					<el-col :span="11">
						<el-form-item label="新房名称" prop="name">
							<el-input v-model="houseNewForm.name"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="新房别名" prop="alias">
							<el-input v-model="houseNewForm.alias"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="11">
						<el-form-item label="新房状态" prop="statusId">
							<el-select v-model="houseNewForm.statusId" placeholder="新房状态" clearable size="small">
								<el-option v-for="dict in houseNewStatus" :key="dict.dictCode" :label="dict.dictLabel" :value="dict.dictValue" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="房屋类型" prop="typesId">
							<el-select v-model="houseNewForm.typesId" placeholder="新房状态" clearable size="small">
								<el-option v-for="dict in houseNewType" :key="dict.dictCode" :label="dict.dictLabel" :value="dict.dictValue" />
							</el-select>
						</el-form-item>
					</el-col>

					<el-col :span="11">
						<el-form-item label="房屋均价(㎡)" prop="avgPrice">
							<el-input v-model.number="houseNewForm.avgPrice"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="房屋总价(万/套)" prop="totalPrice">
							<el-input v-model.number="houseNewForm.totalPrice"></el-input>
						</el-form-item>
					</el-col>


					<el-col :span="11">
						<el-form-item label="售楼处地址" prop="salesAddress">
							<el-input type="textarea" v-model="houseNewForm.salesAddress"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="房屋项目地址" prop="address">
							<el-input type="textarea" v-model="houseNewForm.address"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="11">
						<el-form-item label="经度" prop="longitude">
							<el-input v-model="houseNewForm.longitude" placeholder="项目地址经度"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="纬度" prop="latitude">
							<el-input v-model="houseNewForm.latitude" placeholder="项目地址纬度"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="开发商" prop="developers">
							<el-input type="textarea" v-model="houseNewForm.developers"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="楼盘特色" prop="feature">
							<el-input type="textarea" v-model="houseNewForm.feature"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="排序" prop="orderNum">
							<el-input v-model.number="houseNewForm.orderNum"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="咨询电话" prop="mobile">
							<el-input v-model.number="houseNewForm.mobile"></el-input>
						</el-form-item>
					</el-col>

					<el-col :span="11">
						<el-form-item label="审核创建时间" prop="aduitTime">
							<el-date-picker v-model="houseNewForm.aduitTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="最新开盘" prop="openTime">
							<el-date-picker v-model="houseNewForm.openTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
							</el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="审核人" prop="aduitBy">
							<el-input v-model.number="houseNewForm.aduitBy"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="11">
						<el-form-item label="审核状态" prop="aduitState">
							<el-select v-model="houseNewForm.aduitState" placeholder="新房状态" clearable size="small">
								<el-option v-for="dict in houseAduitState" :key="dict.dictCode" :label="dict.dictLabel" :value="dict.dictValue" />
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<!-- 父子组件之间存在异步问题 -->
				<AreaSelect v-if="areaListPid" :pid="areaListPid" :cid="areaListCid" :aid="areaListAid" v-on:city-event="selectCityValues"
				 key="exists" />
				<AreaSelect v-else :pid="areaListPid" :cid="areaListCid" :aid="areaListAid" v-on:city-event="selectCityValues" key="not-exists" />
				<el-form-item>
					<el-button type="primary" @click="submitForm('houseNewForm')">立即创建</el-button>
					<el-button @click="resetForm('houseNewForm')">重置</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	import {
		getDate
	} from "../../../api/data.js"
	import {
		AreaTree
	} from '../../../api/area.js'
	import {
		getHouseList,
		addHouseList,
		updateHouseList
	} from "../../../api/houseNew.js"
	import AreaSelect from "../../../components/AreaSelect/index.vue"
	export default {
		components: {
			AreaSelect
		},
		data() {
			return {
				houseNewForm: {
					id: undefined,
					name: undefined,
					alias: undefined,
					statusId: undefined,
					typesId: undefined,
					orderNum: undefined,
					avgPrice: undefined,
					totalPrice: undefined,
					address: undefined,
					salesAddress: undefined,
					longitude: undefined,
					latitude: undefined,
					developers: undefined,
					feature: undefined,
					openTime: undefined,
					pid: Number,
					cid: Number,
					aid: Number,
					aduitBy: undefined,
					aduitState: undefined,
					aduitTime: undefined,
					mobile: undefined
				},
				areaListPid: undefined,
				areaListCid: undefined,
				areaListAid: undefined,
				houseEditName: "新增房源",
				buttonSubmit: '立即创建',
				houseNewStatus: [],
				houseNewType: [],
				houseAduitState: [],
				pName: [],
				cName: [],
				aName: [],
				rules: {
					statusId: [{
						required: true,
						message: '房屋状态不能为空',
						trigger: 'blur'
					}],
					typesId: [{
						required: true,
						message: '房屋类型不能为空',
						trigger: 'blur'
					}],
					avgPrice: [{
						type: 'number',
						message: '均价只能是数字',
						trigger: 'change'
					}],
					totalPrice: [{
						type: 'number',
						message: '总价只能是数字',
						trigger: 'change'
					}],
					address: [{
						type: 'required',
						message: '房屋地址不能为空',
						trigger: 'blur'
					}],
					salesAddress: [{
						required: true,
						message: '售楼处地址不能未空',
						trigger: 'blur'
					}],
					longitude: [{
						required: true,
						message: '项目地址经度不能为空',
						trigger: 'blur'
					}],
					latitude: [{
						required: true,
						message: '项目纬度不能为空',
						trigger: 'blur'
					}],
					openTime: [{
						required: true,
						message: '开盘时间不能为空',
						trigger: 'blur'
					}],
					orderNum: [{
						type: 'number',
						message: '排序只能是数字',
						trigger: 'change'
					}],
					mobile: [{
						required: true,
						message: '咨询电话不能为空',
						trigger: 'change'
					}, {
						type: 'number',
						message: '电话只能是数字',
						trigger: 'change'
					}]
				}
			};
		},
		created() {
			this.getHouseNewStatusList();
			this.getHouseNewForm();
			if (this.$router.currentRoute.params.id != 0) {
				this.houseEditName = '修改房源'
				this.buttonSubmit = '立即修改'
			}
		},
		methods: {
			submitForm(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						if (!this.houseNewForm.id) {
							console.log("进入新增")
							addHouseList(this.houseNewForm).then(resp => {
								this.$message({
									type: 'success',
									message: '添加成功'
								})
								this.$router.go(-1);
							}).catch(() => {
								this.$message({
									type: 'error',
									message: '添加失败'
								})
							})
						} else {
							console.log("进入修改")
							updateHouseList(this.houseNewForm).then(resp => {
								this.$message({
									type: 'success',
									message: '修改成功'
								})
								this.$router.go(-1);
							}).catch(() => {
								this.$message({
									type: 'error',
									message: '修改失败'
								})
							})
						}
					} else {
						this.$message({
							type: 'warn',
							message: '请正确输入'
						})
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			},
			getHouseNewStatusList() {
				//查询房屋状态：在售、售罄
				let houseStatusQuery = {
					dictId: '18'
				};
				getDate(houseStatusQuery).then(resp => {
					this.houseNewStatus = resp.data;
				})
				//查询房屋类型：住宅、商业
				let houseTypeQuery = {
					dictId: '13'
				};
				getDate(houseTypeQuery).then(resp => {
					this.houseNewType = resp.data;
				})
				//查询审核状态：已审核、未审核
				let aduitStateType = {
					dictId: '23'
				}
				getDate(aduitStateType).then(resp => {
					this.houseAduitState = resp.data
				})
			},
			getHouseNewForm() {
				if (this.$router.currentRoute.params.id != 0) {
					getHouseList(this.$router.currentRoute.params).then(resp => {
						this.houseNewForm = resp.data[0]
						this.houseNewForm['mobile'] = parseInt(resp.data[0].mobile);
						this.areaListPid = resp.data[0].pid;
						this.areaListCid = resp.data[0].cid;
						this.areaListAid = resp.data[0].aid;
					})
				}
			},
			// 父组件获取子组件的值
			selectCityValues(obj) {
				this.houseNewForm['pid'] = obj.pid;
				this.houseNewForm['cid'] = obj.cid;
				this.houseNewForm['aid'] = obj.aid;
			}
		}
	}
</script>

<style>
	.houseEditName {
		width: 50rem;
		margin: 0 auto;
		height: 6.25rem;
		line-height: 6.25rem;
		text-align: center;
		background-color: #f5f5f6;
	}

	.house-edit {
		padding-top: 0.625rem;
		margin: 0 auto;
		width: 50rem;
	}

	.house-edit el-form-item {
		border-bottom: #D9D9D9;
	}
</style>
